<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流动模型(Flow)</title>
    <style type="text/css">
    /* div{width:200px;height:200px;background-color: blue;}
    span{display:inline-block;width:200px;height:200px;background-color: blueviolet;} */
    </style>
</head>

<body>
    <!-- HTML标签分类  display:block
    1.块级元素
    +  独占一行  
    +  上下排列
    +  100%（继承）


    2.行内元素 display:inline  /  block / inline-block
    + 不独占一行
    + 左右排列
    + 自己本身的大小
    + 转化display
    

    -->
    <!-- 图文 -->
    <div class="item">
        <div class="pic"><img src="https://t10.baidu.com/it/u=216802332,937155335&fm=173&app=49&f=JPEG?w=312&h=208&s=EE1048817A7312921C0CCC96030000A3" alt=""></div>
        <div class="txt"><a href="#">珠峰培训珠峰培训珠峰培训珠峰培训</a></div>
    </div>

    <div>11</div>
    <div>11</div>

    <span>22</span>
    <span>22</span>

    
</body>

</html>